<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :append-to-body="true"
    :width="setDialogWidth('450px')"
    :visible="visible"
    :title="$t('MOD_BUSINESS_COMMENCEMENT')"
    @open="open"
    @close="close"
  >
    <el-form ref="formBox" :model="formData" label-width="auto" class="pr-10" :rules="rules">
      <el-form-item :label="$t('SERVICE_NAME')" prop="bizName" class="w-100">
        <el-input v-model.trim="formData.bizName" maxlength="50" />
      </el-form-item>
      <el-form-item :label="$t('IS_RECOVERY_AUTO')">
        <el-radio-group v-model="formData.isAutoRestore" size="mini">
          <el-radio-button :label="true">{{ $t('OK_YES') }}</el-radio-button>
          <el-radio-button :label="false">{{ $t('OK_NO') }}</el-radio-button>
        </el-radio-group>
        <el-popover width="200" trigger="hover">
          <div class="text-color" v-html="$t('IS_RECOVERY_AUTO_TIPS')" />
          <i slot="reference" class="iconfont icon-AFSwenhao ml-5" />
        </el-popover>
      </el-form-item>
      <el-form-item :label="$t('LINK_DETECTION')" class="w-100">
        <el-radio-group v-model="formData.isOtdrTest" size="mini" :disabled="!formData.isAutoRestore">
          <el-radio-button :label="true">{{ $t('OK_YES') }}</el-radio-button>
          <el-radio-button :label="false">{{ $t('OK_NO') }}</el-radio-button>
        </el-radio-group>
        <el-popover width="200" trigger="hover">
          <div class="text-color" v-html="$t('LINK_DETECTION_TIPS')" />
          <i slot="reference" class="iconfont icon-AFSwenhao ml-5" />
        </el-popover>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CANCEL') }}</el-button>
      <el-button type="primary" @click="$debounce(saveName)">{{
        $t('SAVE')
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import bizOpenApi from '@/api/oen/BizOpenApi'

  export default {
    props: {
      visible: { type: Boolean, default: false },
      rowData: { type: Object, default: () => {} }
    },
    inject: ['parentVM'],
    data() {
      return {
        oldName: '',
        formData: {
          bizName: '',
          isOtdrTest: false,
          isAutoRestore: false,
          bizLevel: 'GENERAL'
        }
      }
    },
    computed: {
      ...mapGetters(['dictList']),
      permission() {
        return this.$store.getters.getAuthData('biz:manager')
      },
      rules() {
        return {
          bizName: [
            {
              required: true,
              message: this.$t('PLEASE_INPUT') + this.$t('SERVICE_NAME'),
              trigger: 'blur'
            },
            { validator: this.checkBizName, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 验证业务名称重复
      async checkBizName(rule, value, callback) {
        if (value === '' || value === this.oldName) return
        const res = await bizOpenApi.bizNameExist({ bizName: value })
        res ? callback(new Error(this.$t('BIZ_NAME_EXIST'))) : callback()
      },
      open() {
        this.oldName = this.rowData.bizName
        this.formData = { ...this.rowData }
      },
      saveName() {
        this.$refs.formBox.validate(valid => {
          if (!valid) return
          if (this.rowData.backNumber === 0 && this.formData.isAutoRestore) {
            this.$message.error(this.$t('CANNOT_BE_PERFORMED'))
            return
          }
          bizOpenApi
            .mod({
              id: this.formData.id,
              bizId: this.formData.bizId,
              bizName: this.formData.bizName,
              isAutoRestore: this.formData.isAutoRestore,
              isOtdrTest: this.formData.isOtdrTest,
              bizLevel: this.formData.bizLevel,
              oldName: this.oldName,
              functionName: this.parentVM.functionName
            })
            .then(res => {
              if (res) {
                this.$message.success(this.$t('MODIFY_SUCCESS'))
                this.close(true)
              } else {
                this.$message.error(this.$t('MODIFYFAILED'))
              }
            })
        })
      },
      close(load) {
        this.$nextTick(() => {
          this.$refs.formBox && this.$refs.formBox.clearValidate()
        })
        this.$emit('close', load)
      }
    }
  }
</script>

<style scoped></style>
